export default function registerUser (lf) {
  lf.register('user', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape () {
        const attributes = this.getAttributes()
        const {
          stroke
        } = attributes
        return h(
          'svg',
          {
            x: 20,
            y: 18,
            width: 30,
            height: 30,
            viewBox: '0 0 1126 1024'
          },
          h(
            'path',
            {
              fill: '#1296db',
              d: 'M716.1 409.062c19.731 0 35.726 16.028 35.726 35.799 0 19.77-15.995 35.8-35.727 35.8H308.897c-19.732 0-35.727-16.03-35.727-35.8 0-19.77 15.995-35.8 35.727-35.8h407.202z m0 204.033c19.731 0 35.726 16.028 35.726 35.799 0 19.77-15.995 35.799-35.727 35.799H308.897c-19.732 0-35.727-16.029-35.727-35.8 0-19.77 15.995-35.798 35.727-35.798h407.202zM851.39 0C908.516 0 955 46.586 955 103.835v816.33C955 977.414 908.516 1024 851.39 1024H172.61C115.484 1024 69 977.414 69 920.165v-816.33C69 46.586 115.484 0 172.61 0h678.78zM310.16 71.615v98.454H713.84V71.615H310.16z m-71.464 0H172.61c-17.71 0-32.147 14.468-32.147 32.22v816.33c0 17.774 14.425 32.22 32.147 32.22h678.78c17.753 0 32.147-14.425 32.147-32.22v-816.33c0-17.764-14.415-32.22-32.147-32.22h-66.085v100.247c0 38.508-31.245 69.822-69.67 69.822h-407.27c-38.425 0-69.67-31.314-69.67-69.822V71.615z'
            }
          )
        )
      }
      getShape () {
        const attributes = this.getAttributes()
        const {
          width,
          height,
          x,
          y,
          fill,
          fillOpacity,
          strokeWidth,
          stroke,
          strokeOpacity,
          points
        } = attributes
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        const pointsPath = points.map(point => point.join(',')).join(' ')
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'polygon',
              {
                points: pointsPath,
                fill,
                stroke,
                strokeWidth,
                strokeOpacity,
                fillOpacity
              }
            ),
            this.getIconShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor (data, graphModel) {
        data.text = {
          value: (data.text && data.text.value) || '',
          x: data.x,
          y: data.y + 50
        }
        super(data, graphModel)
        const lenght = 35
        this.points = [
          [lenght, 0],
          [lenght * 2, lenght],
          [lenght, lenght * 2],
          [0, lenght]
        ]
        // 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
        this.menu = [
          {
            className: 'lf-menu-delete',
            text: 'delete',
            callback (node) {
              // const comfirm = window.confirm('你确定要删除吗？')
              lf.deleteNode(node.id)
            }
          },
          {
            text: 'edit',
            className: 'lf-menu-item',
            callback (node) {
              lf.editNodeText(node.id)
            }
          },
          {
            text: 'copy',
            className: 'lf-menu-item',
            callback (node) {
              lf.cloneNode(node.id)
            }
          }
        ]
      }
    }
    return {
      view: Node,
      model: Model
    }
  })
}
